<template>
    <!--订单查询-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.productNameSet')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('common.ownedApp')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="name" label="">
                            <el-input v-model="form.name" :placeholder="$t('finance.productName')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="search" type="primary" icon="el-icon-search">{{ $t('common.search') }}</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="add" type="primary" >{{ $t('common.add') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;"
                              :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="appName"  :label="$t('common.ownedApp')"></el-table-column><!---->
                        <el-table-column prop="name"  :label="$t('finance.productName')"></el-table-column><!---->
                        <el-table-column prop="active" :label="$t('finance.status')">
                            <template slot-scope="{ row }">
                                <el-switch @change="changeStatus(row)" v-model="row.active" :active-value="1" :inactive-value="0"></el-switch>
                            </template>
                        </el-table-column><!--内部订单号-->

                    </el-table>
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="addDialog.isVisible" :title="$t('common.add')" width="400px" class="operate-dialog" >
            <div class="content">
                <el-form ref="addDialog.form" :model="addDialog.form" :rules="addDialog.rules" label-width="100px" :inline="false" class="module_form">
                    <el-form-item  prop="appName" :label="$t('system.appName')"><!--appName-->
                        <select-app-list v-model="addDialog.form.appName" :placeholder="$t('common.ownedApp')"></select-app-list><!--app名称-->
                    </el-form-item>
                    <el-form-item prop="name" label="" :label="$t('finance.productName')">
                        <el-input v-model="addDialog.form.name" :placeholder="$t('finance.productName')" clearable></el-input>
                    </el-form-item>
                    <!-- <el-form-item prop="active" label="" :label="$t('finance.status')">
                        <el-switch v-model="addDialog.form.active" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item> -->
                    <div class="btn-box">
                        <el-button @click="addDialog.isVisible = false" type="cancel">{{ $t('common.cancel') }}</el-button>
                        <el-button @click="addSubmit" type="primary">{{ $t('common.confirm') }}</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import SelectAppList from '@/components/select-app-list';

    let that = null;
    export default {
        name: 'system-order-search',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                form: {
   
                    appName: '',
                    name: ''
                },
                rules: {

                },
                addDialog:{
                    isVisible:false,
                    form:{
                        name:"",
                        appName:'',
                        active:0
                    },
                    rules:{
                        appName: [
                            {required: true,message: this.$t('verify.plsChoose')},
                        ],
                        name: [
                            {required: true,message: this.$t('verify.plsInput')},
                        ],
                    }
                }
            };
        },
        computed: {
            showControlNumber() {
                // 查看放款序列号权限
                return this.$store.getters.checkUserAuthority('customerService.systemOrderSearch.showControlNumber');
            },
        },
        methods: {
            changeStatus(row){
                console.warn(row)
                this.$alert(this.$t('common.isChangeStatus'), {
                confirmButtonText: this.$t('common.confirm'),
                callback: action => {
                    console.warn(action)
                    if (action=='confirm'){

                        let params = {
                            id:row.id,
                            active:row.active
                        }
                        this.$api.finance.white.active(params).then(res => {
                            const {status, data, error} = res;
                            if ('1' === status && '00000000' === error ) {
                                this.getTableData();
                            }else{
                                this.$message.error(msg);
                            }
                        })
                    }else{
                        this.getTableData();
                    }
                    }
                });
            },
            addSubmit() {
                this.$refs['addDialog.form'].validate((valid) => {
                    if (valid) {
                        const form = this.addDialog.form;
                        this.$api.finance.white.add(form).then(res => {
                            const {status, data, error} = res;
                            if ('1' === status && '00000000' === error ) {
                                this.getTableData();
                                this.addDialog.isVisible = false;
                            }else{
                                this.$message.error(msg);
                            }
                        })
                        console.warn(form)
                        }   
                    })
            },
            add(){
                this.addDialog.form = {
                    name:"",
                    appName:'',
                    active:0
                };
                this.addDialog.isVisible = true;
                this.$nextTick( () => {
                    this.$refs['addDialog.form'].clearValidate();
                });
            },
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                console.warn(params)
                this.$api.finance.white.query(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 265;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        const form = this.form;
                        // if(!form.appName ) {
                        //     this.$message.warning(this.$t('verify.plsCheckSearch'));
                        //     return;
                        // }
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    appName: '',
                    name: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                return params;
            },

        },
        filters: {


        },
        created() {
            that = this;
            // this.getTableData({currentPage: this.page.currentPage}, this.form);
        },
    };
</script>

<style lang="scss" scoped>
    // [data-page=system-order-search] {
        .operate-dialog {
            
        }
        .btn-box {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .noteRed {
            color: red;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
        .dialogContent {
            .el-row {
                margin-bottom: 5px;
            }
            .info {
                word-wrap: break-word;
            }
        }
        .line {
            margin: 10px 0;
            border-bottom: 1px solid #d4d7da;
        }
    // }
</style>
